<script>
import {
  TABLE_FIELD_QUARTER, TABLE_FIELD_YEAR,
} from '@/config'
import EnergyTableMixin from '@/components/quarterly-account-table-new/energy-table-mixin'
import ArrowSelectMixin from '@/components/quarterly-account-table-new/arrow-select-mixin'
import ContextMenuMixin from '@/components/quarterly-account-table-new/context-menu-mixin'

/* IFTRUE_ONLY_NANCHANG
import { loadReconstructionProject } from '@/api/enterpriseQuarterlyReport2'
FITRUE_ONLY_NANCHANG */
/* IFTRUE_NOT_NANCHANG */
import { loadReconstructionProject } from '@/api/enterpriseQuarterlyReport'
/* FITRUE_NOT_NANCHANG */

import { uuid } from '@/utils'

export default {
  name: 'energy-saving-renovation-project-information-table',
  mixins: [EnergyTableMixin, ContextMenuMixin, ArrowSelectMixin],
  created () {
    this.loadList = loadReconstructionProject
  },
  data () {
    return {
      // 表序号
      seriesNo: '表1-5',
    }
  },
  methods: {
    transfer (lists) {
      return lists.map(v => {
        const data = this.flattenColumns.map(vv => {
          const key = vv.prop
          const value = String(!this.is_empty_value(v[key]) ? v[key] : '')
          return {
            key,
            value,
            editable: key !== 'serialNumber',
          }
        })
        return {
          uuid: uuid(),
          data: data,
          informant: {
            personInCharge: v.personInCharge,
            informer: v.informer,
            telephone: v.telephone,
            fillInDate: v.fillInDate,
          }
        }
      })
    },
    // 初始化表数据
    initLists (params, needInformant = true) {
      // 查询企业填报的数据
      if (this.loadList) {
        params = params || {
          [TABLE_FIELD_YEAR]: this.year,
          [TABLE_FIELD_QUARTER]: this.quarter,
          tenantId: this.enterpriseId
        }
        return this.loadList(params).then(async res => {
          if (res.code === 200) {
            const data = res.data || []

            this.isKept = !needInformant;
            this.lists = this.transfer(data)

            if (!this.fromGovernmentSide) {
              // 补足企业端不足行的数据
              const l = this.lists.length
              this._initLists(l, 1)
            }

            this.$nextTick(() => {
              this.initInputIndex()
            })
          }
        }).catch(() => {
          console.log('reject')
          this._initLists(0, 1)
          this.$nextTick(() => {
            this.initInputIndex()
          })
        })
      }
    },
    getMaxlength (key) {
      if (key === 'contractEnergyManagement') return 1;
      if (key === 'projectName') return 20;
      if (key === 'mainTransformationContent') return 100;
      if (key === 'projectProgress') return 50;
      return null;
    }
  },
}
</script>

<template>
  <div class="bg-white height-100 quarterly-account-table position-relative overflow-hidden">
    <slot name="title" :title="title" :series-no="seriesNo">
      <h2 class="table-title">
        {{title}}
      </h2>
    </slot>
    <div class="report-table-head">
      <table class="report-table">
        <table-head :columns="columns" :show-line-number="showLineNumber" isEnergySavingRenovationProjectInformationTable></table-head>
      </table>
    </div>
    <el-scrollbar :style="{height: 'calc(100% - 95px)'}" wrap-style="overflow-x: hidden;">
      <table class="report-table" :class="{'is-readonly-table': readonly}">
        <tbody ref="tbody">
        <tr v-for="(item, i) in lists" :key="item.uuid">
          <th v-if="showLineNumber" class="is-stable-cell width-40px line-number">{{i + 1}}</th>
          <td v-for="(d, index) in item.data" :key="item.uuid + index"
            :style="{width: index === 0 ? '40px' : 'auto'}"
            :class="{
              'is-stable-cell': d.stable || d.key === 'serialNumber',
              'is-computed-cell': d.key !== 'serialNumber' && (d.calculable || d._computed),
              'is-editable-cell': d.editable && !readonly && d.key !== 'serialNumber',
            }"
          >
            <div v-if="d.key === 'serialNumber'" class="span-cell">
              {{ i+1 }}
            </div>
            <div v-else-if="!d.editable || readonly" class="span-cell">
              {{d.value}}
            </div>
            <div v-else class="input-cell">
              <input
                v-if="['investmentAmount','energySavingProject'].includes(d.key)"
                type="text" v-model="d.value"
                v-only-positive-number="val => d.value = val"
                :maxlength="getMaxlength(d.key)"
                @click="clickHandler($event, i)" @contextmenu="onContextmenu($event, i)"
              >
              <input
                v-else-if="d.key === 'contractEnergyManagement'"
                type="text" v-model="d.value"
                v-only-is-or-no="val => d.value = val"
                :maxlength="getMaxlength(d.key)"
                @click="clickHandler($event, i)" @contextmenu="onContextmenu($event, i)"
              >
              <input
                v-else
                type="text" v-model="d.value"
                :maxlength="getMaxlength(d.key)"
                @click="clickHandler($event, i)" @contextmenu="onContextmenu($event, i)"
              >
            </div>
          </td>
        </tr>
        </tbody>
      </table>
      <report-person ref="reportPerson" :is-kept="isKept" :informer="informant" :readonly="readonly"></report-person>
      <div v-if="tableDescription" class="fill-description">
        <template>
          <!-- <p>说明：</p>
          <p>1．填报期内完成的和正在实施的项目，年节能量500吨标准煤以上节能改造项目均应填报。</p>
          <p>2．项目进度：已完成的项目填写完成日期，实施中项目填写执行情况和后续进度计划。</p>
          <p>3．项目名称字数在20个汉字以内，主要改造内容字数在100个汉字以内，项目进度字数在50个汉字以内。</p> -->
          <el-input type="textarea" class="width-100 table-description" :value="tableDescription" readonly autosize></el-input>
        </template>
      </div>
    </el-scrollbar>
    <transition name="el-fade-in">
      <ul v-if="visible" :style="{left:left+'px', top: top + 'px'}" class="contextmenu">
        <li style="color:var(--danger-color);" @click="delRow">删除当前行</li>
        <li class="divider"></li>
        <li @click="prependRow">在上方插入一行</li>
        <li @click="appendRow">在下方插入一行</li>
      </ul>
    </transition>
  </div>
</template>
